<template>
  <div class="app-container">
	<el-table
	  v-loading="loading"
	  :data="manualAttenceList"
	  row-key="id"
	  :tree-props="{children: 'children', hasChildren: 'hasChildren'}">


		<el-table-column prop="name" label="名称" :show-overflow-tooltip="true" />


		<el-table-column label="操作" align="center" >
		  <template slot-scope="scope">
			  <el-button
			          v-if="scope.row.type== 2"
			          size="mini"
			          circle type="success"
			          icon="el-icon-edit"
			          @click="menualAttence(scope.row)"
			          v-hasPermi="['smartdor:manualsdattence:add']"/>
		  </template>
		</el-table-column>
	</el-table>

	<!-- 添加或修改菜单对话框 -->
	<el-dialog :title="title" :visible.sync="open" width="600px"  >
	  <el-form ref="form" :model="form" :rules="rules" label-width="100px">

		  <el-form-item label="考勤时间：">
			<el-date-picker
			  v-model="form.attenceDate"
			  size="small"
			  style="width: 140px"
			  value-format="yyyy-MM-dd" @change="changeAttenceDate"/>
		  </el-form-item>

		  <el-table :data="studentList">
			  <el-table-column prop="studentName" label="学生名称" :show-overflow-tooltip="true" />
			 <!--
			  <el-table-column prop="accessDate" label="考勤时间" :show-overflow-tooltip="true" />
			  <el-table-column prop="attenceStatus" label="考勤状态" :show-overflow-tooltip="true" />
			  -->
			  <el-table-column label="操作" align="center" >
				 <template slot-scope="scope">
                      <span v-if="scope.row.attenceStatus==4">
						  <input type="radio"  checked="checked" :name="scope.row.studentNo"   disabled="disabled">正常
					      <input type="radio"  checked="checked" :name="scope.row.studentNo"   disabled="disabled">未归寝
					      <input type="radio"  checked="checked" :name="scope.row.studentNo"   disabled="disabled">请假

					  </span>
					  <span v-else>
						  <label v-for="item in attenceStatus" :key="item.value" >
						    <span v-if="item.value!=4">
						  	<span v-if="scope.row.attenceStatus==item.value">
						  		<input type="radio"  checked="checked" :name="scope.row.studentNo"  :value="item.value" @click="changeAttence">{{item.label}}
						  	</span>
						  	<span v-else>
						  		<input type="radio"  :name="scope.row.studentNo"  :value="item.value" @click="changeAttence">{{item.label}}
						  	</span>
							</span>
						  </label>
					  </span>
					  <!--
				       <label v-for="item in attenceStatus" :key="item.value" >
				            <span v-if="scope.row.attenceStatus==4 && scope.row.attenceStatus==item.value">
								 <input type="radio"  checked="checked" :name="scope.row.studentNo"  :value="item.value" disabled="disabled">{{item.label}}
							</span>
							<span v-else>
				     		   <span v-if="scope.row.attenceStatus==item.value">
				     			   <input type="radio"  checked="checked" :name="scope.row.studentNo"  :value="item.value" @click="changeAttence">{{item.label}}
				     		   </span>
				     		   <span v-else>
				     			   <input type="radio"  :name="scope.row.studentNo"  :value="item.value" @click="changeAttence">{{item.label}}
				     		   </span>
				           	</span>
				       </label>
			          -->

			    </template>

			  </el-table-column>
		  </el-table>

	   </el-form>
	  <div slot="footer" class="dialog-footer">
	    <el-button type="primary" @click="submitForm">确 定</el-button>
	    <el-button @click="cancel">取 消</el-button>
	  </div>
	</el-dialog>

  </div>
</template>

<script>

import { getListManualAttence ,getStuByDormitoryNo,addManualAttence} from "@/api/smartdor/sdmanualAttence.js";
export default {
  name: "Menu",
  inject:['reload'],
  data() {
    return {
	  studentNoArray:[],
	  statusArray:[],
      // 遮罩层
      loading: true,
	  // 人工考勤列表
	  manualAttenceList:[],
	  // 学生列表
	  studentList:[],
	  //考勤列表
	  //attenceList:[],
	  // 考勤状态
	  attenceStatus:[{label:"正常",value:'1'},{label:"未归寝",value:'2'},{label :"请假" , value:'4'}],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,

      // 查询参数
      queryParams: {
        accessDate: undefined,
        bdormitoryId: undefined,
      },
      // 表单参数
      form: {
		  statusArray:undefined,
		  studentNoArray:undefined,
		  attenceDate:new Date()
	  },
      // 表单校验
      rules: {
        attenceDate: [
          { required: true, message: "考勤时间不能为空", trigger: "blur" }
        ]
      }
    };
  },

  created() {
    this.getList();
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
	  getListManualAttence(this.queryParams).then(response => {
			  this.manualAttenceList = this.handleTree(response.data, "id");
			  this.loading = false;
	  });
    },



    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.$router.go(0);

    },

    /** 人工考勤操作 */
    menualAttence(row) {
		this.open = false;
		this.form.building_no = row.building_no;
		this.form.storey = row.storey;
		this.form.dormitoryId = row.id;
		this.form.dormitoryNo = row.name;
		this.form.attenceDate =  new Date();

		// alert(this.studentNoArray.length);
		// for(var i=0;i<this.studentNoArray.length;i++){
		// 	alert(this.studentNoArray[i]);
		// 	alert(this.form.this.studentNoArray[i].value);
		// }

		// alert(this.form.studentNoArray.length);
		// if(this.form.studentNoArray.length >0 ){

		// }

		// this.attenceStatus=[];
		this.attenceStatus=[{label:"正常",value:'1'},{label:"未归寝",value:'2'},{label :"请假" , value:'4'}];

		// alert("attenceDate" + this.form.attenceDate);
	    //格式化考勤时间
		// let access_date= this.form.attenceDate.getFullYear()+"-"+(this.form.attenceDate.getMonth()+1)+"-"+this.form.attenceDate.getDate() ;
     
     let month = this.form.attenceDate.getMonth()+1;
       if(month<10){
        month = "0"+month;
       }
       let date = this.form.attenceDate.getDate();
       if(date <10){
        date = "0"+date;
       }
       let access_date= this.form.attenceDate.getFullYear()+"-"+month+"-"+date;
     
   
		this.queryParams.accessDate = access_date;
		this.queryParams.bdormitoryId = row.id;
		//alert("bdormitoryId :"+this.form.dormitoryId +" accessDate :"+access_date);
		getStuByDormitoryNo(this.queryParams).then(response=> {

		  this.studentList = response.data ;
		  this.open = true;
		  this.title = "人工考勤";
		   this.initStudentNoArrayAndStatusArray();
		})

    },
	initStudentNoArrayAndStatusArray(){

		this.studentNoArray=[];
		this.statusArray = [];
		for(var i=0;i<this.studentList.length;i++){
					  //alert("学生编号："+this.studentList[i].studentNo +"-----"+this.studentList[i].attenceStatus);

					  this.studentNoArray.push(this.studentList[i].studentNo);
					  this.statusArray.push(this.studentList[i].attenceStatus);
		}

		this.form.studentNoArray = this.studentNoArray;
		this.form.statusArray = this.statusArray;
	},
	changeAttenceDate(){
		//this.open = false;
		//alert(this.form.attenceDate)
		//let access_date= this.form.attenceDate.getFullYear()+"-"+(this.form.attenceDate.getMonth()+1)+"-"+this.form.attenceDate.getDate() ;

		//alert("bdormitoryId :"+this.form.dormitoryId +" accessDate :"+this.form.attenceDate)


		// 把获取的考勤时间使用 - 分割
		var dateArr = this.form.attenceDate.split("-");

		var year = parseInt(dateArr[0]); // 获取 年

		var month ; // 定义 月
		if(dateArr[1].indexOf("0") == 0){
			month = parseInt(dateArr[1].substring(1));
		}else{
			month = parseInt(dateArr[1]);
		}
		// 获取 日
		var day = parseInt(dateArr[2]);
		var _attencedate = new Date(year,month -1,day); // 把考勤时间转换为日期格式

		// alert("选择的考勤时间： "+date);
		// alert("当前时间："+new Date());

		// alert("考勤时间大于当前时间吗 ？"+(date>new Date()))

		if(_attencedate>new Date()){
			alert("选择的考勤时间不能大于当前时间");
			this.form.attenceDate = new Date();
		}



		this.queryParams.accessDate = this.form.attenceDate;
		this.queryParams.bdormitoryId = this.form.dormitoryId;
		getStuByDormitoryNo(this.queryParams).then(response=> {
		  this.studentList=[];
		  this.studentList = response.data ;
		  //this.open = true;
		  //this.title = "人工考勤";
		  //alert("changeAttenceDate :"+this.studentList )
		  //this.open = true;
		 // this.title = "人工考勤";

		  this.initStudentNoArrayAndStatusArray();
		})
	},
	changeAttence(e){
		let current_that = e.currentTarget
		//alert("数组长度： "+this.studentNoArray);

		for(var i=0;i<this.studentNoArray.length;i++){
			//alert("已经保存到数组中的元素：" +this.studentNoArray[i]+"----------"+this.statusArray[i]);
		    if(this.studentNoArray[i] ==current_that.name ){
		    	this.studentNoArray.splice(i,1);  // 删除数组元素
				this.statusArray.splice(i,1);  // 删除数组元素
		    }
		}

		this.studentNoArray.push(current_that.name);
		this.statusArray.push(current_that.value);

		//alert(this.studentNoArray +"**********"+this.statusArray)

		this.form.studentNoArray = this.studentNoArray;
		this.form.statusArray = this.statusArray;


		//alert("this.studentNoArray=   "+this.studentNoArray +"    ------ this.statusArray "+this.statusArray)
	}
	,
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
			addManualAttence(this.form).then(response=>{
				if (response.code === 200) {
				  //this.msgSuccess("考勤成功");
				  alert("考勤成功")
				  //location.reload();
				  this.open = false;
				  this.$router.go(0);

				} else {
				  this.msgError(response.message);
				}
			})
		  /*
          if (this.form.id !== undefined) {
            updateMenu(this.form.id,this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              } else {
                this.msgError(response.message);
              }
            });
          } else {
            addMenu(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              } else {
                this.msgError(response.message);
              }
            });
          }
		  */
        }
      });
	  //alert("开始刷新")
	  //this.reload();
    }
  }
};
</script>
